<template>
	<div class="CompontensViews" :style="{ '--table-radio': tableRadio, '--draw-radio': drawRadio }">
		<!-- 头部搜索 -->
		<div class="right-content-title">
			<div class="btns">
				<el-button size="mini" v-show="styleOptionsValue != 3"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;margin-left: 10px;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini" v-show="styleOptionsValue != 3"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button>
			</div>
			<div class="left-select">
				<!-- 显示 -->
				<div class="selectView">
					<el-button size="mini" type="primary" style="font-size: 14px;height: 26px;line-height: 0;"
						class="select-btn" v-if="styleOptionsValue == 2" @click="(styleOptionsValue = 3), styleFun()">
						{{ $t("message.styleOptions.value1") }}
					</el-button>
					<el-button size="mini" type="primary" style="font-size: 14px;height: 26px;line-height: 0;"
						class="select-btn" v-if="styleOptionsValue == 3" @click="(styleOptionsValue = 2), styleFun()">
						{{ $t("message.styleOptions.value3") }}
					</el-button>
				</div>
				<!-- 检査目的 -->
				<div class="selectView">
					<div class="selectViewLabel" :style="{ color: getInspPurposeColorFlg ? 'red' : '' }">
						{{ $t("message.bhView.label.checkObjective") }}
					</div>
					<el-select v-model="ispPurSourceValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt" @change="ispPurSourceValueChange">
						<el-option v-for="item in ispPurSource" :key="item.key" :label="item.label"
							:value="item.key"></el-option>
					</el-select>
				</div>
				<!-- 刷新 -->
				<el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
					<div class="refresh" @click="getOfferHeaderApi('', true)">
						<i class="iconfont">&#xe81f;</i>
						<!-- <span>刷新</span> -->
					</div>
				</el-tooltip>

				<!-- 3D viewer -->
				<!-- <div class="DViewer">
					<el-tooltip class="item" effect="dark" :content="$t('message.tooltip.title_2')" placement="top">
						<i class="iconfont" @click="modelClick">&#xe8e5;</i>
					</el-tooltip>
				</div> -->

				<el-tooltip class="item" effect="dark" content="計画" placement="top">
					<div class="DViewer">
						<i class="el-icon-document" @click="cpsClick1"></i>
					</div>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="結果" placement="top">
					<div class="DViewer">
						<i class="el-icon-document-checked" @click="cpsClick"></i>
					</div>
				</el-tooltip>
				<!-- mushi-->


			</div>

			<div class="right-select">
				<!-- 计划表示时间 -->
				<div class="select-tab">
					<div class="select-tab-label">
						{{ $t("message.bhView.label.planningTime") }}
					</div>
					<el-select v-model="planningTime" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-tab-ipt" @change="changePlanningTime">
						<el-option v-for="item in planningTimeList" :key="item.key" :label="item.label"
							:value="item.key"></el-option>
					</el-select>
				</div>

				<div class="selectView" style="margin-left: 16px">
					<el-button size="mini" type="primary" style="font-size: 14px;height: 24px;line-height: 0;"
						class="select-btn" v-for="(item, index) in btn_list" :key="index" v-if="btn_list_index == index"
						@click="changeIndex(index)">
						{{ item.label }}
					</el-button>
				</div>
			</div>
		</div>
		<!--table -->
		<div class="tabel-view-wrapper">
			<MSDetailTabel ref="MSDetailTabel" :tableHeight="tableHeight" :prposTabelData="prposTabelData"
				:loading="loading" @getMSTabelRow="getMSTabelRow" :tabelDataConfig="tabelDataConfig" :empty="empty"
				:rightViewFlag="rightViewFlag">
			</MSDetailTabel>
		</div>
		<!-- 类型筛选 -->
		<div class="select-legend-view" v-show="styleOptionsValue != 3">
			<div class="select-legend">
				<el-radio-group v-model="radio" @change="$store.commit('changeMsDetailRadio', radio)">
					<el-radio label="2">{{
						$t("message.tooltip.title_4")
					}}</el-radio>
					<el-radio label="1">{{
						$t("message.tooltip.title_3")
					}}</el-radio>
				</el-radio-group>
			</div>

			<div class="select-legend">
				<!-- <el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button> -->
			</div>
		</div>
		<!-- cad -->
		<div class="CADView" v-show="styleOptionsValue != 3">
			<!-- <p class="iconfont-view">
                <i class="iconfont dragIcon" @mousedown="mouseDown">&#xe820;</i>
              </p> -->
			<div id="LineEcharts" v-show="styleOptionsValue == 1"></div>
			<!-- <div id="CADView"></div> -->
			<CadViewForMS v-show="styleOptionsValue == 2" ref="CadViewForMS" :isShow="styleOptionsValue == 2"
				@onMarkupSelected="onMarkupSelected" :isShowMarkups="radio" />
		</div>
		<!-- 3D Viewer -->
		<div class="Viewer" v-if="ViewerFlag">
			<matterportView class="martter_view" :towRsUrl="towRsUrl" @onCloseClick="modelClick" />
			<!-- <iframe
				:src="iframeUrl"
				frameborder="0"
				ref="refed"
				style="width: 100%; height: 100%"
				id="iframeId"
			></iframe>

			<div class="get-url-view">
				<el-input
					size="samll"
					v-model="urlValue"
					style="width: 50%"
				></el-input>
				<el-button @click="IndoorUrlSet()">GO&&Setting</el-button>
				<button class="close-btn" @click="modelClick">
					{{ $t("message.public.close") }}
				</button>
			</div> -->
		</div>

		<!-- 右侧信息框 -->
		<div class="right-Viewer" v-show="rightViewFlag" v-cloak>
			<rightViewTabs :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick" :rightViewFlag="rightViewFlag">
			</rightViewTabs>
		</div>

		<div class="right-Viewer" v-show="rightViewFlag1" v-if="!$hasOption('OPT_IDEM')" v-cloak>
			<rightViewTabs1 ref="rightViewTabs1Ref" :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick1"
				@updateSvgAndMarkups="updateSvgAndMarkups" :rightViewFlag1=rightViewFlag1>
			</rightViewTabs1>
		</div>

		<!-- 出光 -->
		<div class="right-Viewer" v-show="rightViewFlag1" v-if="$hasOption('OPT_IDEM')" v-cloak>
			<rightViewTabs1Customer1 ref="rightViewTabs1Ref" :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick1"
				@updateSvgAndMarkups="updateSvgAndMarkups" :rightViewFlag1=rightViewFlag1>
			</rightViewTabs1Customer1>
		</div>

	</div>
</template>

<script>
import {
	addMachineIndoorView,
	getMachineIndoorView,
	getIspPurSource,
	getOfferDetialData,
	getFilterPlan,
	getPlanPeriod,
	getOfferHeaderObjctl,
	getOfferHeader,
	getInspPurposeCombox,
	getInspPurposeColor,
} from "@/api/api.js";
import $ from "jquery";
import MSDetailTabel from "./MSDetailTabel";
import CadViewForMS from "./CadViewForMS";
import rightViewTabs from "./MSDetailDialogCompontens/TabsCompontens.vue";
import rightViewTabs1 from "./MSDetailDialogCompontens/TabsCompontens1.vue";
import rightViewTabs1Customer1 from "@/components/Customize/Customer003/views/MSDetailDialogCompontens/TabsCompontens1.vue";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "../../eventBus/bus";
import matterportView from "./MSDialogCompontens/matterportView.vue";
import { emit } from "process";

export default {
	props: ["leftTabelRow", "valuePlant"],
	name: "MSDetaliCompontens",
	data() {
		return {
			getOfferDetialDataFlg: 0,
			getIndex: 0,
			MSDetailTabelKey: 0,
			// 显示样式
			styleOptions: [
				{
					value: this.$t("message.styleOptions.value1"),
					id: 2,
				},
				{
					value: this.$t("message.styleOptions.value3"),
					id: 3,
				},
			],
			styleOptionsValue: 2,
			options: [],
			value: "",
			planningTime: "",
			planningTimeTemp: "",
			planningTimeKey: null,
			planningTimeList: [],
			planningTimeSelect: "",
			planningTimeSelectList: [],
			tableHeight: 278,
			prposTabelData: [], // tabel数据
			loading: true, // tabel加载loading
			pageIndex: 1,
			pageSize: 20,
			radio: this.$store.state.msDetailRadio,
			//       radio: "2",
			ViewerFlag: false,
			rightViewFlag: false,
			rightViewFlag1: false,
			iframeUrl:
				"https://nv2.navvis-kke.biz/iv.eneos-negishi/?vlon=1.87&vlat=-0.16&fov=76.0&image=3541457883867378",
			towRsUrl: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ",
			urlValue: "",
			ispPurSource: [],
			ispPurSourceValue: 0,
			ispPurSourceValueTemp: 0,
			ispPurSourceKye: "",
			btn_list: [],
			btn_list_index: 0,
			btn_list_value: "",
			filterPlanKey: "",
			getInspPurposeColorFlg: 0,
			tabelDataConfig: {
				ssnDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				opeDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				inspectName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				posNo: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				posName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispSpcCode: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispWayName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				impReason: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				timCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				opnCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				thkCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				icdCstCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				ispRstCodName: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				summary: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				cntPln: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				orgThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				mgtThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lmtThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				crrDept: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				heaThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				remThck: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				chgDate: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lstThk: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				lstLif2: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
				oddLif: {
					width: 0,
					isFlex: false,
					isShow: false,
				},
			},
			empty: "",

			tableSelectRow: null,

			tableRadio: "50%",
			nTableRadio: 0.5,
			drawRadio: "50%",
		};
	},
	components: {
		MSDetailTabel,
		CadViewForMS,
		rightViewTabs,
		rightViewTabs1,
		rightViewTabs1Customer1,
		matterportView
	},
	watch: {
		leftTabelRow: {
			deep: true,
			// immediate: true,
			handler: function (newV, oldV) {
				this.$emit("getNumberData", 0);
				if (JSON.stringify(newV) === JSON.stringify(oldV)) {
					return;
				}

				if (this.rightViewFlag) {
					// this.cpsClick();
					// getMachineIndoorView({
					// 	macCode: this.leftTabelRow.macCode,
					// }).then((res) => {
					// 	if (res.data.code != 0) {
					// 		this.urlValue = "";
					// 		return;
					// 	}
					// 	this.urlValue = res.data.data[0].indoorViewAddr;
					// });
				}

				if (this.ViewerFlag) {
					// this.modelClick();
					// getMachineIndoorView({
					// 	macCode: this.leftTabelRow.macCode,
					// }).then((res) => {
					// 	if (res.data.code != 0) {
					// 		this.urlValue = "";
					// 		return;
					// 	}
					// 	this.urlValue = res.data.data[0].indoorViewAddr;
					// });
				}
				this.updateSvgAndMarkups();
				this.getOfferHeaderApi();
				// getMachineIndoorView({ macCode: newV.macCode }).then((res) => {
				// 	if (res.data.code != 0) {
				// 		this.urlValue = "";
				// 		return;
				// 	}
				// 	this.urlValue = res.data.data[0].indoorViewAddr;
				// });

				this.towRsUrl = newV.note
					? newV.note
					: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ";
			},
		},
	},
	methods: {

		//	图画框放大缩小
		ViewFn(type) {
			console.log(this.tableRadio, type, '123');
			if ((this.tableRadio == '20.00%' && type == 1) || (this.tableRadio == '80.00%' && type == 2)) {
				return
			}
			if (type == 1) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn1(this.tableRadio);
					this.drawRadio = this.currentFn(this.drawRadio);
					this.nTableRadio += 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() - 75

					this.$refs.CadViewForMS.loadSvg();
				})
			}
			if (type == 2) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn(this.tableRadio);
					this.drawRadio = this.currentFn1(this.drawRadio);
					this.nTableRadio -= 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() + 75

					this.$refs.CadViewForMS.loadSvg();
				})
			}
		},
		currentFn(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue += 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},
		currentFn1(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue -= 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},

		//布局样式筛选
		styleFun() {
			this.$store.commit(
				"changeMSDetailStyleCode",
				this.styleOptionsValue
			);
			let _this = this;
			if (this.styleOptionsValue == 3) {
				this.$nextTick(function () {
					this.tableHeight = $(".CompontensViews").height() - 50;
				});
				this.tableRadio = '100%';
				this.drawRadio = '0%';
				this.nTableRadio = 0.5;
				return;
			} else {
				this.tableRadio = '50%';
				this.drawRadio = '50%';
				this.nTableRadio = 0.5;
				this.$refs.CadViewForMS.loadSvg();
			}
			//切换布局样式如果是折线图 默认绘制第一条数据
			if (this.styleOptionsValue == 1) {
				this.getLineChartDataApi(this.prposTabelData[0]);
				setTimeout(function () {
					_this.$nextTick(function () {
						_this.tableHeight =
							$(".CompontensViews").height() * this.nTableRadio -
							40;
					});
				});
				return;
			}
			setTimeout(function () {
				_this.$nextTick(function () {
					_this.tableHeight =
						$(".CompontensViews").height() * this.nTableRadio - 40;
				});
			});
		},
		//获取右上表格某一行数据
		getMSTabelRow(row) {
			console.log(row);
			//       if(this.$store.state.msDetailRadio == 1) {
			//               console.log("getMSTabelRow --- 1");
			//               this.$refs.CadViewForMS.setSelectedMarkup(row.posNo);
			//       }
			console.log('sfdskjfh 333');
			this.$refs.CadViewForMS.setSelectedMarkup(row.posNo);
			this.tableSelectRow = row;
		},
		//右下角图纸中markup选中回调
		onMarkupSelected(e) {
			this.$refs.MSDetailTabel.setCurrentByR(e);
		},

		updateSvgAndMarkups() {
			// 根据
			console.log(this.leftTabelRow);
			this.$refs.CadViewForMS.loadSvgDataByRow(
				this.leftTabelRow.macCode, //this.leftTabelRow.macCode,
				"colorOptionsValue", //this.colorOptionsValue,
				"LifeAssBaseVaule", //this.LifeAssBaseVaule,
				this.leftTabelRow.pltCode, //this.leftTabelRow.pltCode,

				this.leftTabelRow.macName, //this.macName,
				"fasd", //this.valuePlant,
				this.leftTabelRow.macType, //this.leftTabelRow.macType,
				this.styleOptionsValue != 2
			);
		},
		modelClick() {

			//初始监听状态
			if (this.ViewerFlag) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}

			let Fn = () => {
				this.rightViewFlag = false;
				this.rightViewFlag1 = false;
				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				if (!_this.ViewerFlag) {
					$(".CADView").animate(
						{ width: parentWidth / 2 },
						300,
						function () {
							_this.ViewerFlag = !_this.ViewerFlag;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth / 2 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth / 2 },
						300
					);
				} else {
					_this.ViewerFlag = !_this.ViewerFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMSD");
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		//结果
		cpsClick(isShowSave = true) {
			this.$refs.MSDetailTabel.reSetTableFn()

			// if (this.rightViewFlag1) {
			// 	this.cpsClick1()
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {
				//初始监听状态
				this.$store.commit('reSetIsStop');
				eventBus.$emit('changeType', 2);
				this.ViewerFlag = false;
				this.rightViewFlag1 = false;

				// setTimeout(() => {
				// 	this.$refs.MSTabel.setCurrentByR(0);
				// }, 500);
				let _this = this;
				let parentWidth = $(".CompontensViews").width();

				if (!_this.rightViewFlag) {

					setTimeout(() => {
						eventBus.$emit('isGetInfo1');
						// this.$refs.MSDetailTabel.setCurrentByR(0);
					}, 350);
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightViewFlag = !_this.rightViewFlag;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);

				} else {
					_this.rightViewFlag = !_this.rightViewFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				// eventBus.$emit("resetTabelStyleForMSD", 1);
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}




		},
		//式样
		cpsClick1(isShowSave = true) {
			// if (this.rightViewFlag) {
			// 	this.cpsClick()
			// }
			// this.$refs.rightViewTabs1Ref.reSetTableFn1()
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag1 && isShowSave) {
			// 	eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			// }

			let Fn = () => {
				//初始监听状态
				this.$store.commit('reSetIsStop');

				this.ViewerFlag = false;
				this.rightViewFlag = false;
				let _this = this;
				let parentWidth = $(".CompontensViews").width();

				if (!_this.rightViewFlag1) {
					setTimeout(() => {
						eventBus.$emit("reClickActive");
						eventBus.$emit('isGetInfo');
					}, 201);
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							_this.rightViewFlag1 = !_this.rightViewFlag1;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.rightViewFlag1 = !_this.rightViewFlag1;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMSD");
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		getUrl() {
			const url =
				parent.document.getElementById("iframeId").contentWindow
					.location.href;
			// this.$alert(url)
			console.log(parent.document.getElementById("iframeId"));
		},
		IndoorUrlSet() {
			let dataJson = {
				// id: this.leftTabelRow.indoorID?this.leftTabelRow.indoorID:'',
				macCode: this.leftTabelRow.macCode,
				indoorViewAddr: this.urlValue,
			};
			addMachineIndoorView(dataJson).then((res) => {
				if (res.data.code != 0) {
					return;
				}
				debugger
				this.iframeUrl = this.urlValue;
			});
		},
		getIspPurSourceApi() {
			let dataJson = {
				userAccount: getLocalStorage("userName"),
			};
			getIspPurSource(dataJson).then((res) => {
				this.ispPurSource = [];
				this.ispPurSourceValue = "";
				if (res.data.code != 0) {
					this.$store.commit("changeIspPurSourceKey", 0);
					return;
				}
				this.ispPurSource = res.data.data;
				this.$nextTick(function () {
					if (this.$store.state.ispPurSourceKey) {
						this.ispPurSource.forEach((item) => {
							if (this.$store.state.ispPurSourceKey == item.key) {
								this.ispPurSourceValue = item.label;
							}
						});
					} else {
						this.ispPurSourceKye = this.ispPurSource[0].key;
						this.$store.commit(
							"changeIspPurSourceKey",
							this.ispPurSourceKye
						);
					}
				});
			});
		},
		// getInspPurposeCombox根据检査目的再次筛选   getInspPurposeColor
		async getInspPurposeColorApi() {
			let res = await getInspPurposeColor({});
			this.getInspPurposeColorFlg = res.data.data;
		},
		// async getInspPurposeComboxApi() {
		// 	this.getInspPurposeColorApi();
		// 	this.ispPurSource = [];
		// 	let res = await getInspPurposeCombox({});
		// 	this.ispPurSource = res.data.data.filter(obj => obj.isHidden === 0);
		// 	console.log('this.ispPurSource', this.ispPurSource);
		// 	this.ispPurSource.unshift({
		// 		key: 0, label: "ALL", isHidden: 0
		// 	})
		// },
		async getOfferDetialDataApi(Num = false) {
			this.getOfferDetialDataFlg++
			if (this.getOfferDetialDataFlg != 1) {
				return
			}
			setTimeout(() => {
				this.getOfferDetialDataFlg = 0;
			}, 500);

			await this.getInspPurposeColorApi();
			console.log(this.$store.state.planningTimeKey);
			console.log(this.planningTime);
			let dataJson = {
				pageIndex: 1,
				pageSize: 1000,
				dmgCode: this.leftTabelRow.macCode,
				ispClsCode: this.$store.state.ispPurSourceKey,
				planPeriodCode: this.$store.state.planningTimeKey
					? this.$store.state.planningTimeKey || this.planningTime
					: 120,
				filterPlan: this.$store.state.filterPlanKey,
				pltCode: this.leftTabelRow.pltCode,
				userAccount: getLocalStorage("userName"),
			};
			this.loading = true;
			getOfferDetialData(dataJson)
				.then((res) => {
					this.loading = false;
					// !res.data.data
					// 	? (this.empty = "No Data")
					// 	: (this.empty = "");
					if (!res.data.data) {
						this.ispPurSourceValue = '';
						this.ispPurSource = [];
						this.empty = "No Data";
					} else {
						this.empty = "";
					}
					this.prposTabelData = [];
					if (res.data.code == -1) {
						this.$alert(res.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return;
					}

					if (res.data.code != 0) {
						eventBus.$emit('isGetInfo1');
						return;
					}
					this.prposTabelData = res.data.data.dataList;

					// ispPurSourceValueChange(value) {
					// 	this.ispPurSourceKye = value;
					// 	this.$store.commit("changeIspPurSourceKey", this.ispPurSourceKye);
					// 	this.getOfferHeaderApi();
					// }
					if (this.getIndex > 3) {
						this.getIndex = 0;
						return
					}
					console.log('res.data.data.inspCombox.some(obj => obj.key === this.$store.state.ispPurSourceKey)', res.data.data.inspCombox.some(obj => obj.key === this.$store.state.ispPurSourceKey));
					try {
						if (res.data.data.inspCombox.some(obj => obj.key === this.$store.state.ispPurSourceKey)) {
							// 检査目的存在
							this.ispPurSource = [];
							this.ispPurSource = res.data.data.inspCombox;
							this.ispPurSourceValue = this.$store.state.ispPurSourceKey;
							this.getIndex = 0;
						} else {
							this.ispPurSourceValue = 0;
							this.$store.commit("changeIspPurSourceKey", 0);
							this.ispPurSourceValueChange(0);
							this.getIndex++;
							return
						}
					} catch (error) {
						this.ispPurSourceValue = 0;
						this.$store.commit("changeIspPurSourceKey", 0);
						this.ispPurSourceValueChange(0);
						this.getIndex++;
						return
					}

					// if (this.$store.state.ispPurSourceKey == 0) {
					// 	this.ispPurSource = [];
					// 	this.ispPurSource = res.data.data.inspCombox;
					// }
					// 根据检査目的再次筛选
					this.MSDetailTabelKey++
					this.$emit("getNumberData", res.data.count);
					setTimeout(() => {
						eventBus.$emit('SET_F', Num)
					}, 300);

				})
				.finally(() => {
					this.loading = false;
				});
		},
		getFilterPlanApi() {
			getFilterPlan().then((res) => {
				this.btn_list = [];
				if (res.data.code != 0) {
					return;
				}
				this.btn_list = res.data.data;
				if (this.$store.state.filterPlanKey) {
					this.btn_list.forEach((item, index) => {
						if (this.$store.state.filterPlanKey == item.key) {
							this.btn_list_index = index;
						}
					});
				} else {
					this.filterPlanKey = this.btn_list[this.btn_list_index].key;
					this.$store.commit(
						"changeFilterPlanKey",
						this.filterPlanKey
					);
				}
			});
		},
		changeIndex(index) {
			//初始监听状态

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.btn_list_index = index + 1;
				if (this.btn_list_index > 2) {
					this.btn_list_index = 0;
				}
				this.filterPlanKey = this.btn_list[this.btn_list_index].key;
				this.$store.commit("changeFilterPlanKey", this.filterPlanKey);
				this.getOfferHeaderApi();
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}
		},
		getPlanPeriodApi() {
			let dataJson = {
				years: 20,
			};
			getPlanPeriod(dataJson).then((res) => {
				if (res.data.code != 0) {
					this.planningTimeList = [];
					this.$store.commit("changePlanningTimeKey", 0);
					return;
				}
				this.planningTimeList = res.data.data;
				if (this.planningTime == '') {
					this.planningTime = this.planningTimeList[this.planningTimeList.length - 1].key;
					this.planningTimeTemp = this.planningTimeList[this.planningTimeList.length - 1].key;
				}

				if (this.$store.state.planningTimeKey) {
					this.planningTimeList.forEach((item) => {
						if (this.$store.state.planningTimeKey == item.key) {
							this.planningTime = item.label;
						}
					});
				} else {
					this.ispPurSourceKye = this.planningTimeList[0].key;
					this.$store.commit(
						"changePlanningTimeKey",
						this.planningTimeKey
					);
				}
			});
		},
		ispPurSourceValueChange(value) {

			//初始监听状态

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样


			let Fn = () => {
				this.ispPurSourceKye = value;
				this.ispPurSourceValueTemp = value;
				this.$store.commit("changeIspPurSourceKey", this.ispPurSourceKye);
				this.getOfferHeaderApi();
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
		changePlanningTime(value) {

			//初始监听状态

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.planningTimeKey = value;

				this.planningTimeTemp = value;
				this.$store.commit("changePlanningTimeKey", this.planningTimeKey);
				this.getOfferHeaderApi();
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		async getOfferHeaderObjctlApi(Num) {
			let dataJson = {
				type: 2,
				cntlName: "Spread2",
				formID: "AM33000",
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			};
			let res = await getOfferHeaderObjctl(dataJson);
			return res.data.data;
		},
		getOfferHeaderApi(Num, flg = false) {

			//初始监听状态
			if (flg) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}

			let Fn = () => {
				let dataJson = {
					type: 2,
					account: getLocalStorage("userName"),
					formID: "AM330001",
					cntlName: "Spread2",
					language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
				};
				getOfferHeader(dataJson).then(async (res) => {
					this.loadFlag = true;
					if (res.data.code != 0) {
						return;
					}
					this.tabelDataConfig = res.data.data;
					let titles = await this.getOfferHeaderObjctlApi();
					Object.keys(this.tabelDataConfig).forEach((item, index) => {
						this.tabelDataConfig[item].title = titles[index];
					})
					console.log('tabelDataConfig1111111111111111', this.tabelDataConfig);
					this.getOfferDetialDataApi(Num);
				});
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
	},
	created() {
		this.$store.commit("changeIspPurSourceKey", 0);
		this.getFilterPlanApi();
		// this.getIspPurSourceApi();
		this.getPlanPeriodApi();
		this.$nextTick(function () {
			this.updateSvgAndMarkups();
			this.getOfferHeaderApi();
		});

		// 宽高比
		let windowWhRadio =
			document.documentElement.clientWidth /
			document.documentElement.clientHeight;
		if (windowWhRadio > 1.78) {
			this.tableRadio = "50%";
			this.drawRadio = "50%";
			this.nTableRadio = 0.5;
		} else {
			this.tableRadio = "40%";
			this.drawRadio = "60%";
			this.nTableRadio = 0.4;
		}
	},
	mounted() {
		let _this = this;

		eventBus.$on("LoadMSDetailTabelData", (Num) => {
			this.getOfferHeaderApi(Num);
			// _this.getOfferDetialDataApi();
		});

		this.styleOptionsValue == 3
			? (this.tableHeight = $(".CompontensViews").height() - 50)
			: (this.tableHeight =
				$(".CompontensViews").height() * this.nTableRadio - 40);


		//  如果保存报错则-切换之前的搜索状态
		eventBus.$on("backParamsForLeftView", () => {
			console.log("目视详细 backParamsForLeftView", this.ispPurSourceKye, this.ispPurSourceValueTemp);

			this.ispPurSourceValue = this.ispPurSourceValueTemp;
			this.planningTime = this.planningTimeTemp;

		})

	},
	beforeDestroy() {
		eventBus.$off("backParamsForLeftView");
		eventBus.$off("LoadMSTabelData");

	},
};
</script>
<style lang="scss" scoped>
[v-cloak] {
	display: none;
}

.CompontensViews {
	width: 100%;
	height: 100%;
	position: relative;

	.Viewer,
	.right-Viewer {
		position: absolute;
		width: 700px;
		height: calc(100% - 60px);
		background: #fff;
		right: 0;
		top: 56px;
		z-index: 66;

		.get-url-view {
			width: 100%;
			position: absolute;
			z-index: 666;
			bottom: 10px;
			left: 10px;
			display: flex;
			align-items: center;

			.close-btn {
				width: 82px;
				height: 32px;
				background: #ffffff;
				border: 1px solid #d9d9d9;
				margin-right: 12px;
				border-radius: 4px;
				position: absolute;
				background: #eb7421;
				color: #fff;
				right: 0px;
			}
		}
	}

	.Viewer {
		width: 50%;
	}

	.right-content-title {
		padding: 16px 0 16px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.selectView {
				margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.selectViewLabel {
					line-height: 24px;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}

				.select-ipt {
					width: 145px;
					height: 24px;

					::v-deep .el-input__inner {
						width: 145px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}

				.style-ipt {
					width: 100px;

					::v-deep .el-input__inner {
						width: 100px;
					}
				}
			}

			.refresh {
				min-width: 40px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.iconfont {
					margin: 0 4px;
					font-size: 17px;
					height: 24px;
					line-height: 24px;
				}
			}

			.DViewer {
				margin-left: 8px;
				min-width: 40px;
				height: 24px;
				// border-radius: 4px;
				// border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;

				// cursor: pointer;
				.iconfont,
				.el-icon-document {
					font-size: 20px;
					margin: 0 4px;
					color: #2a7190;
					cursor: pointer;
				}
			}
		}

		.right-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.date-btn {
				min-width: 66px;
				height: 24px;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #eaeaeb;
				margin: 0 4px;
			}

			.date-btn-active {
				background: #106ebe;
				color: #fff;
			}

			.select-tab {
				margin-left: 18px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-tab-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}
		}
	}

	.select-btn {
		min-width: 100px;
		height: 24px;
		min-height: 24px;
		// background: #106ebe;
		// color: #fff;
		border: 1px solid #eaeaeb;
		border-radius: 4px;
		cursor: pointer;
	}

	.select-legend-view {
		width: 100%;
		padding: 10px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-legend {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			// margin-right: 24px;

			.select-legend--ipt {
				::v-deep .el-input__inner {
					width: 120px;
					height: 24px;
					color: rgba(0, 0, 0, 0.65);
					background: #f8f8f8;
				}

				::v-deep .el-input__icon {
					line-height: 24px;
				}
			}
		}

		.select-legend-color {
			margin-right: 16px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: 100px;
			position: relative;

			.select-legend-color-box {
				width: 24px;
				height: 24px;
				border-radius: 2px;
				border: 1px solid #d9d9d9;
				margin-right: 8px;
				cursor: pointer;
			}
		}

		.messageColor {
			margin-left: 8px;
			position: absolute;
			right: 16px;
		}
	}

	.tabel-view-wrapper {
		height: calc(var(--table-radio) - 40px);
		overflow: hidden;
	}

	.CADView {
		width: 100%;
		height: calc(var(--draw-radio) - 40px);
		position: relative;
		background: #fff;
		border: 1px solid #c3c3c3;
		border-top: 3px solid #c3c3c3;

		.iconfont-view {
			position: absolute;
			width: 100%;
			height: 4px;
			left: 0;
			top: -2px;
			opacity: 0;
			transition: 0.5s;
			z-index: 10;
			cursor: pointer;
		}

		#LineEcharts {
			width: 100%;
			height: calc(100% - 80px);
			margin-top: 20px;
		}

		.dragIcon {
			position: absolute;
			top: -22px;
			left: 50%;
			transform: translate(-50%);
			font-size: 30px;
		}

		.iconfont-view:hover {
			opacity: 1;
		}
	}
}

::v-deep .el-table--border td,
::v-deep .el-table--border th,
::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 0 none;
}

// ::v-deep .el-icon-document:before{
//   content: "\e785" ;
// }
.el-icon-document-checked {
	font-size: 20px;
	margin: 0 4px;
	color: #2a7190;
	cursor: pointer;
}

.btns {
	display: flex;
	position: absolute;
	right: 130px;
	top: -36px;

	button {
		height: 24px !important;
	}
}
</style>
